<template>
	<view class="ListOfPatients">
		<Head class='HeadClass'></Head>
		<view class="ListOfPatients_All">
			<view class="ListOfPatients_TP">
				<u-button class="custom-style" text="医嘱查询" @tap="nav"></u-button>
				<view class="select_btn">
					<u-button class="custom-styleTwo" text="类别"></u-button>
					<Select class="SelectList" :disabled="false" v-model="examinationTypeIndex" :options="options"
						@change="change"></Select>
				</view>
			</view>
			<view class="ListOfPatients_BT">
				<scroll-view style="height: 100%;" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll">
					<view class="ListOfPatientsBT_item" v-for="(item,index) in list" :key="index"
						style="margin-bottom: 10px;" @tap="getListFun(item,index)">
						<u-form :model="form" ref="uForm" labelAlign="right">
							<u-form-item prop="name">
								<u-form-item prop="name" style='width: 32px; height: 20px;'>
									<u-input :class="[item.children[0].DelayFlag=='1'?'Insd':'']"
										:value="item.children[0].groupflag" :disabled="true"></u-input>
								</u-form-item>
								<text class="ListOfPatientsBTItem_textT"
									v-if="item.children[0].frequency">{{item.children[0].frequency}}</text>
								<text class="ListOfPatientsBTItem_textT" v-else></text>
								<view class="ListOfPatientsBTItem_text" v-if="item.children[0].ordertype">
									{{item.children[0].ordertype.trim() == 'S'?'临':item.children[0].ordertype.trim() == 'R' ? '长':item.children[0].ordertype.trim() == 'C'?'出':item.children[0].ordertype}}
								</view>
								<view class="" v-else></view>
								<view class="ListOfPatientsBTItem_textT">
									{{item.children[0].admission}}
								</view>
								<view class="ListOfPatientsBTItem_Right">
									{{item.children[0].plandate}}
								</view>
								<image class="Iage" src="../../assets/image/sjd.png"></image>
							</u-form-item>
						</u-form>
						<view class="ListOfPatientsBT_center">
							<view class="ListOfPatientsBT-center-title" v-for="(el,ind) in item.children" :key="ind"
								:style="{'background':bgColorted(item.children[0]),'color':Colorted(item.children[0])}">
								{{el.remark + el.drmodel + el.many +'.0' + el.packunit + (el.dosage.trim()  ? '【'+el.dosage+'】' : el.dosage)}}
							</view>
							<view class="ListOfPatientsBT-center-bottom"
								v-if="item.children[0].mark && item.children[0].mark.trim() != ''">
								<text>备注：</text>
								<text>{{item.children[0].mark}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<Report :show2="show" :reportShow="reportShow" :reportObj="reportObj" @cancelTails="cancelTails"
			@StopMedicalit="StopMedicalit"></Report>
		<suspension-ball :isShow="false" @tap.native="jampBall"></suspension-ball>
	</view>
</template>

<script>
	import Select from './selevt.vue'
	import Report from './details.vue'
	import Head from '../../components/html/head.vue'
	import suspensionBall from '../../components/html/xuanfuqiu.vue'
	import {
		Order_Get_Order_List
	} from '../../api/user.js'
	import {
		mapMutations,
		mapState
	} from "vuex";
	export default {
		components: {
			Select,
			Head,
			Report,
			suspensionBall
		},
		data() {
			return {
				form: {
					name: '',
				},
				show: false,
				reportShow: false,
				scrollTop: 0,
				examinationTypeIndex: 1,
				examinationTypeArrayType: '请选择',
				select: '',
				options: [{
					value: "1",
					label: "2小时"
				}, {
					value: "2",
					label: "4小时"
				}, {
					value: "3",
					label: "6小时",
					// disabled: true
				}, {
					value: "4",
					label: "8小时",
					// disabled: true
				}, {
					value: "5",
					label: "10小时",
					// disabled: true
				}, {
					value: "6",
					label: "12小时",
					// disabled: true
				}, {
					value: "12",
					label: "24小时",
					// disabled: true
				}],
				value: "2小时",
				value1: "",
				list: [],
				arr: [],
				reportObj: {}
			};
		},
		watch: {
			deleteObj: {
				// deep: true,
				handler(newval, oldval) {
					console.log(newval);
					if (newval.MRN != oldval.MRN) {
						this.Order_Get_Order_ListFun()
					}
				},
			}
		},
		destroyed() {
			console.log(22);
			uni.removeStorageSync('scanningArray')
		},
		mounted() {
			this.arr = uni.getStorageSync('scanningArray')
			if (this.arr) {
				this.list = this.arr
			} else {
				this.Order_Get_Order_ListFun()
			}
			let arr = uni.getStorageSync('passObj')
			// console.log();
		},
		computed: {
			...mapState('user', ["userInfo", "deleteObj", "scanningArray"]),
			bgColorted(data) {
				return data => {
					return data.drugtest == '1' ? 'yellow' : data.drugtest == 'E' ? 'red' : data.drugtest ==
						'PMR' ? 'GREEN' : ''
				}
			},
			Colorted(data) {
				return data => {
					return data?.riskflag?.trim() == '1' ? 'blue' : ''
				}
			}
		},
		methods: {
			...mapMutations("user", ["set_scanningArray"]),
			nav() {
				uni.navigateTo({
					url: '../ListOfPatients/yizhuchaxun'
				});
			},
			jampBall() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			change(e) {
				console.log(e);
				this.examinationTypeIndex = e
				this.Order_Get_Order_ListFun()
			},
			scroll(e) {
				//记录scroll  位置
				this.oldScrollTop = e.detail.scrollTop
			},
			async Order_Get_Order_ListFun() {
				try {
					this.scrollTop = this.oldScrollTop
					//当视图渲染结束 重新设置为0
					this.$nextTick(() => {
						this.scrollTop = 0
					});
					uni.showLoading({
						title: '加载中...', //显示的文字
						// duration: 5000, //显示多少时间，默认1500毫秒
						icon: "loading", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
						mask: true
					})
					const user = uni.getStorageSync('userInfo')
					const obj = uni.getStorageSync('deleteObj')
					const data = {
						HosKind: user.hoscode,
						mrn: obj.MRN,
						series: obj.SERIES,
						kind: this.examinationTypeIndex * 2,
						type: "",
						sOperdept: user.HosKind,
						sOperJp: user.sPassword
					}
					const res = await this.$http.Order_Get_Order_List(data)
					let isFalg = res[0].hasOwnProperty('result')
					if (isFalg) {
						this.list = []
						this.$nextTick(() => {
							uni.hideLoading();
						})
					} else {
						let asss = this.alpha_sort(res)
						asss.sort((q, w) => {
							return new Date(q.children[0].plandate) > new Date(w.children[0].plandate) ? 1 : -
								1;
						})
						this.list = asss
						this.$nextTick(() => {
							uni.hideLoading();
						})
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			alpha_sort1(target) {
				let obj = {},
					result = [],
					resget = [],
					resLi = [];
				target.map((item, index) => {
					let key = item.plandate;
					//如果有这个key，就push一个对象
					if (obj[key]) {
						obj[key].push(item);
						//如果没有这个key，就把对象设置成数组格式（方便后面push进去）
					} else {
						obj[key] = [item];
					}
				});
				//根据obj中有几个对象，挨个push进去，组成最后的数组
				for (const key in obj) {
					// console.log(obj[key]);
					const element = obj[key]
					result.push(
						element
					)
				}
				result = [...result, ...resget, ...resLi]
				console.log(result);
				return result;
			},
			alpha_sort(target) {
				let obj = {},
					result = [],
					resget = [],
					resLi = [];
				let d = []
				target.map((item, index) => {
					let key = item.setno;
					if (key == 0) {
						resget.push({
							children: [item]
						});
						return
					}
					//如果有这个key，就push一个对象
					if (obj[key]) {
						obj[key].push(item);
						//如果没有这个key，就把对象设置成数组格式（方便后面push进去）
					} else {
						obj[key] = [item];
					}
				});
				//根据obj中有几个对象，挨个push进去，组成最后的数组
				for (const key in obj) {
					// console.log(obj[key]);
					const element = obj[key];
					let Arrye = this.checkRepeat(element, 'remark')
					if (Arrye.length > 0) {
						let Clits = this.alpha_sort1(Arrye)
						Clits.map(item => {
							resLi.push({
								children: item
							})
						})
					} else {
						result.push({
							children: element
						})
					}
				}
				result = [...result, ...resget, ...resLi]
				console.log(result);
				return result;
			},
			checkRepeat(arr, value) {
				var array = [];
				arr.forEach((item) => {
					if (item) {
						array.push(item[value]);
					}
				});
				if ((new Set(array)).size != arr.length) {
					return arr;
				}
				return false;
			},
			getListFun(data, value) {
				if (data.children[0].prtype == 'NSC') {
					console.log(data);
					this.show = true
					this.reportObj = data
					this.reportShow = true
				}
			},
			cancelTails(data, title, Arraye) {
				if (title == 'queren') {
					if (Arraye[0].result == '1') {
						uni.showToast({
							title: "医嘱执行成功！", //显示的文字
							duration: 2000, //显示多少时间，默认1500毫秒
							icon: "success", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
							mask: true
						})
					}
					this.show = data
					setTimeout(() => {
						this.Order_Get_Order_ListFun()
					}, 1000)
				} else {
					this.show = data
				}
			},
			StopMedicalit() {
				console.log('看看看');
			},
		}
	};
</script>

<style scoped lang="scss">
	.ListOfPatients {
		width: 100%;
		height: 100vh;
		background: #F9F9F9;
		position: relative;
		overflow: hidden;

		.HeadClass {
			width: 100%;
			position: fixed;
			z-index: 99;
		}

		.ListOfPatients_All {

			background: #F9F9F9;
			position: absolute;
			padding: 10px 7px;
			width: 96%;
			margin: 103px auto 0;
			height: calc(100% - 110px);
			// position: absolute;
			// top: 0;
			// left: 0;
			// padding: 10px 10px;
			// margin-top: 79px;
		}

		.ListOfPatients_TP {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;

			.custom-style {
				width: 84px;
				height: 36px;
				background: #82ECC3;
				box-shadow: 0px 2px 6px 0px rgba(98, 200, 160, 0.5);
				border-radius: 6px;
				color: #FFFFFF;
				font-size: 16px;
				margin: 0 0;
				margin-right: 10px;
			}

			.select_btn {
				display: flex;
				width: 100%;

				.custom-styleTwo {
					width: 52px;
					height: 36px;
					background: #82ECC3;
					box-shadow: 0px 2px 6px 0px rgba(98, 200, 160, 0.5);
					border-radius: 6px 0px 0px 6px;
					color: #FFFFFF;
					font-size: 16px;
					margin: 0 0;
				}

				.SelectList {
					min-width: 81%;
				}
			}
		}

		::v-deep .ep-picker-box {
			min-width: 81% !important;
		}

		.ListOfPatients_BT {
			width: 100%;
			height: calc(100% - 55px);
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			overflow-y: scroll;

			.ListOfPatientsBT_item {
				width: 100%;
				// height: 100px;
				background: #B0E9EC;
				border-radius: 6px;
				padding-bottom: 17px;
				position: relative;


				.ListOfPatientsBTItem_text {
					font-size: 16px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #FF4D65;
					line-height: 24px;
				}

				.ListOfPatientsBTItem_textT {
					font-size: 16px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #333333;
					line-height: 24px;
				}

				.ListOfPatientsBTItem_Right {
					width: 164px;
					height: 30px;
					// background: #FFFFCF ;
					// border-bottom-left-radius: 404rpx;
					// background-image: url("../../assets/image/sjd.png");
					// background-size: 104% 115%;
					// background-repeat: no-repeat;
					text-align: right;
					line-height: 30px;
					z-index: 1;
				}

				.Iage {
					width: 54% !important;
					height: 42% !important;
					position: absolute;
					top: 0;
					right: -1px;
				}
			}

			.ListOfPatientsBT_center {
				background: #F6FEFF;
				border-radius: 6px;
				opacity: 0.95;
				margin: -9px 6px;
				padding: 10px 5px 10px 10px;
				display: flex;
				flex-direction: column;

				.ListOfPatientsBT-center-title {
					font-size: 16px;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #086168;
					line-height: 24px;
				}

				.ListOfPatientsBT-center-bottom {
					font-size: 12px;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #FF4D65;
					line-height: 18px;
				}
			}
		}

	}

	::v-deep .u-form-item__body__right__content__slot {
		justify-content: space-between;
	}

	::v-deep .u-form-item__body {
		padding: 0px 5px;
		margin-bottom: 15px;
	}

	::v-deep .u-border {
		border: none;
		background: #F6FEFF;
	}

	::v-deep .u-checkbox__icon-wrap--square {
		background: #CAF0F3 !important;
		border-radius: 2px !important;
		border: 2px solid #7AD9DF !important;
	}

	::v-deep .u-input {
		padding: 0 0 !important;
		width: 22px !important;
		height: 22px !important;
	}

	::v-deep .Insd {
		.uni-input-input {
			background-color: red !important;
		}
	}

	::v-deep .uni-input-input {
		background: #CAF0F3 !important;
		border-radius: 2px !important;
		border: 2px solid #7AD9DF !important;
	}

	::v-deep .uni-input-input {
		width: 81% !important;
		height: 18px !important;
	}

	::v-deep .Iage div {
		background-size: auto !important;
		background-position: 100% 0% !important;
	}
</style>
